<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父容器让子容器沿主轴排列及交叉轴位置排列</title>
    <style>
        .dad {
            background: grey;
            height: 600px;
            display: flex;
            justify-content: space-between; /*设置子容器在主轴上滴位置 可理解为X轴*/
            align-items: center; /*设置子容器在交叉轴上滴位置 可理解为Y轴*/
        }

        .son1 {
            visibility: visible;  /*设置hidden可以占位*/
            background:blue;
            width: 30%;
            height: 80px;
        }
        .son2 {
            background:green;
            width: 40%;
            height: 80px;
        }
        .son3 {
            background:orange;
            width: 30%;
            height: 80px;
        }
    </style>
</head>
<body>
<div class="dad">
    <div class="son1">
        儿子1
    </div>

    <span class="son2">
        儿子1
    </span>
    <div class="son3">
        儿子3
    </div>
</div>
</body>
</html>